<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { PositionAdd } from "@/http/api";
export default {
  components: { outMain },
  name: "",
  data() {
    const checkPhone = (rule, value, callback) => {
      let result = this.$ruleCheck.checkPhone(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    const checkMoney = (rule, value, callback) => {
      if (this.moneyType == 1) {
        callback();
      } else {
        let result = this.$ruleCheck.checkMoney(
          this.formData.start_monry,
          this.formData.end_monry
        );
        if (!result) {
          if (this.formData.unit) {
            callback();
          } else {
            callback(new Error("请选择薪资单位"));
          }
        } else {
          callback(new Error(result));
        }
      }
    };
    const checkzprs = (rule, value, callback) => {
      let result = this.$ruleCheck.checkIntNumber(value);
      if (!result) {
        callback();
      } else {
        callback(new Error(result));
      }
    };
    return {
      detailId: this.$route.query.id,
      moneyType: 1,
      formData: {
        position_name: "",
        position_type: 1,
        start_monry: "",
        end_monry: "",
        unit: 1,
        gwfl: [],
        zprs: 1,
        hygk: "",
        scsj: "",
        mqbj: 3,
        xlyq: "",
        zsdj: "证书不限",
        gjyq: "",
        yynl: "",
        nlyq: "",
        gzjy: "",
        position_contact_mobile: "",
        watercraft_name: "",
        watercraft_colors: "",
        watercraft_hh: "",
        watercraft_imo: "",
        watercraft_num: "",
        watercraft_type: "",
        watercraft_area: "",
        watercraft_zcsj: "",
        watercraft_dw: "吨",
        gwms: "",
      },
      rules: {
        position_name: [
          {
            required: true,
            message: "岗位职务不能为空，且长度不能超过50个字",
            trigger: "blur",
            min: 0,
            max: 50,
          },
        ],
        checkMoney: [
          {
            validator: checkMoney,
            required: true,
            trigger: "blur",
          },
        ],
        position_contact_mobile: [
          {
            validator: checkPhone,
            required: true,
            trigger: "blur",
          },
        ],
        zprs: [
          {
            validator: checkzprs,
            required: true,
            trigger: "blur",
          },
        ],
      },
      ourBootArr: [],
      yyspArr: [
        { name: "能力不限" },
        { name: "能正常沟通" },
        { name: "非常流畅" },
      ],
      selectBootArr: [],
      companyArr: [],
      nationType: [],
      bootLineType: [],
      bootType: [],
      workNameType: [],
      eduType: [
        { name: "学历不限" },
        { name: "高中及以上" },
        { name: "专科及以上" },
        { name: "本科及以上" },
        { name: "研究生及以上" },
      ],
      gwflArr: [],
      expType: [
        { name: "经验不限" },
        { name: "1-3年经验" },
        { name: "3-5年经验" },
        { name: "5-10年经验" },
        { name: "10年以上经验" },
      ],
      bookLeaveArr: [
        { label: "证书不限", value: "证书不限" },
        { label: "甲一", value: "甲一" },
        { label: "甲二", value: "甲二" },
        { label: "丙一", value: "丙一" },
        { label: "丙二", value: "丙二" },
      ],
    };
  },
  props: {},
  setup() {},
  methods: {
    async getCate(type) {
      const { data } = await getContent({ type: type });
      if (data.code == 1) {
        if (type == 3) {
          this.workNameType = data.data;
        } else if (type == 8) {
          this.nationType = data.data;
        }
      }
    },
    getMonthTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const str = `${y}-${m}`;
      return str;
    },
    getYearTime(time) {
      const y = time.getFullYear();
      const str = `${y}`;
      return str;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      if (typeof this.formData.scsj === "object") {
        this.formData.scsj = this.getMonthTime(this.formData.scsj);
      }
      if (this.moneyType == 1) {
        this.formData.start_monry = "";
        this.formData.end_monry = "";
      }
      let queryData = { ...this.formData };
      if (typeof queryData.watercraft_zcsj == "object") {
        queryData.watercraft_zcsj = this.getYearTime(queryData.watercraft_zcsj);
      }
      queryData.gwfl = this.formData.gwfl.join(",");
      // delete queryData.gwfl;
      const { data } = this.detailId
        ? await PositionEdit(queryData)
        : await PositionAdd(queryData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      PositionShow({ enterprise_position_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          if (res.data.data.gwfl == "") {
            res.data.data.gwfl = [];
          }
          this.formData = res.data.data;
          this.formData["enterprise_position_id"] = this.detailId;
          if (res.data.data.start_monry == "0") {
            this.moneyType = 1;
          } else {
            this.moneyType = 2;
          }
        }
      });
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  async created() {
    this.workNameType = await this.$getCate.getCateFn(3);
    this.nationType = await this.$getCate.getCateFn(8);
    this.bootType = await this.$getCate.getCateFn(1);
    this.bootLineType = await this.$getCate.getCateFn(2);
    this.gwflArr = await this.$getCate.getCateFn(11);
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>新增岗位</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form :rules="rules" ref="ruleForm" :model="formData">
          <div class="formDes no_Bg">
            <div class="formTitle">岗位信息</div>
            <div class="flexCont">
              <el-form-item
                label="岗位职务"
                label-width="120"
                prop="position_name"
              >
                <el-select
                  v-model="formData.position_name"
                  filterable
                  allow-create
                  clearable
                  placeholder="请选择岗位职务"
                >
                  <el-option
                    v-for="item in workNameType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="岗位类型"
                label-width="120"
                prop="position_type"
              >
                <el-radio-group v-model="formData.position_type">
                  <el-radio :value="1">普通岗位</el-radio>
                  <el-radio :value="2">急聘岗位</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="薪资类型" label-width="120">
                <el-radio-group v-model="moneyType">
                  <el-radio :value="1">面议</el-radio>
                  <el-radio :value="2">薪资范围</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="moneyType == 2"
                label="岗位月薪"
                label-width="120"
                prop="checkMoney"
              >
                <div class="formItemFlex">
                  <el-input
                    style="width: 60%"
                    placeholder="请输入薪资范围"
                    maxlength="10"
                    v-model="formData.start_monry"
                  />
                  <div class="flexLine">～</div>
                  <el-input
                    placeholder="请输入薪资范围"
                    maxlength="10"
                    v-model="formData.end_monry"
                  >
                    <template #append>
                      <el-select
                        v-model="formData.unit"
                        placeholder="单位"
                        style="width: 70px"
                      >
                        <el-option label="元" :value="1" />
                        <el-option label="美元" :value="2" />
                      </el-select>
                    </template>
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="岗位福利" label-width="120">
                <el-select
                  v-model="formData.gwfl"
                  filterable
                  multiple
                  clearable
                  placeholder="请选择岗位福利"
                >
                  <el-option
                    v-for="item in gwflArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="招聘人数" label-width="120" prop="zprs">
                <el-input
                  placeholder="请输入招聘人数"
                  maxlength="4"
                  clearable
                  v-model="formData.zprs"
                  ><template #append>人</template></el-input
                >
              </el-form-item>
              <el-form-item label="换员港口" label-width="120">
                <el-input
                  placeholder="请输入换员港口"
                  maxlength="6"
                  clearable
                  v-model="formData.hygk"
                />
              </el-form-item>
              <el-form-item label="上船时间" label-width="120">
                <el-date-picker
                  v-model="formData.scsj"
                  type="month"
                  style="width: 100%"
                  clearable
                  placeholder="请选择上船时间"
                />
              </el-form-item>
              <el-form-item label="名企背景" label-width="120" prop="mqbj">
                <el-radio-group v-model="formData.mqbj">
                  <el-radio :value="1">国企</el-radio>
                  <el-radio :value="2">知名企业</el-radio>
                  <el-radio :value="3">不选择</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="学历要求" label-width="120" prop="xlyq">
                <el-select
                  v-model="formData.xlyq"
                  filterable
                  clearable
                  placeholder="请选择学历要求"
                >
                  <el-option
                    v-for="item in eduType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="证书等级" label-width="120" prop="zsdj">
                <el-select
                  v-model="formData.zsdj"
                  clearable
                  placeholder="请选择证书等级"
                >
                  <el-option
                    :key="index"
                    v-for="(item, index) in bookLeaveArr"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="国籍要求" label-width="120" prop="gjyq">
                <el-select
                  v-model="formData.gjyq"
                  filterable
                  clearable
                  allow-create
                  placeholder="请选择国籍要求"
                >
                  <el-option
                    v-for="item in nationType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="英语能力" label-width="120" prop="yynl">
                <el-select
                  style="width: 100%"
                  v-model="formData.yynl"
                  filterable
                  clearable
                  allow-create
                  placeholder="请选择英语能力要求"
                >
                  <el-option
                    v-for="item in yyspArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="年龄要求" label-width="120" prop="nlyq">
                <el-input
                  clearable
                  maxlength="10"
                  placeholder="请输入年龄要求（例如：40岁以上）"
                  v-model="formData.nlyq"
                />
              </el-form-item>
              <el-form-item label="工作经验" label-width="120" prop="gzjy">
                <el-select
                  clearable
                  v-model="formData.gzjy"
                  filterable
                  allow-create
                  placeholder="请选择工作经验"
                >
                  <el-option
                    v-for="item in expType"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="岗位电话"
                label-width="120"
                prop="position_contact_mobile"
              >
                <el-input
                  clearable
                  maxlength="11"
                  placeholder="请输入此岗位的中介联系电话"
                  v-model="formData.position_contact_mobile"
                />
              </el-form-item>
              <el-form-item class="flexPull" label="岗位描述" label-width="120">
                <el-input
                  v-model="formData.gwms"
                  maxlength="3000"
                  placeholder="请输入岗位描述"
                  show-word-limit
                  :rows="8"
                  type="textarea"
                />
              </el-form-item>
            </div>
            <div class="formDes no_Bg">
              <div class="formTitle">船舶信息</div>
              <div class="flexCont">
                <el-form-item
                  label="船舶名称"
                  label-width="120"
                  prop="watercraft_name"
                >
                  <el-input
                    clearable
                    placeholder="请输入船舶名称"
                    v-model="formData.watercraft_name"
                  />
                </el-form-item>
                <el-form-item
                  label="船旗"
                  label-width="120"
                  prop="watercraft_colors"
                >
                  <el-input
                    clearable
                    placeholder="请输入船旗"
                    v-model="formData.watercraft_colors"
                  />
                </el-form-item>
                <el-form-item
                  label="呼号"
                  label-width="120"
                  prop="watercraft_hh"
                >
                  <el-input
                    clearable
                    placeholder="请输入呼号"
                    v-model="formData.watercraft_hh"
                  />
                </el-form-item>
                <el-form-item
                  label="imo"
                  label-width="120"
                  prop="watercraft_imo"
                >
                  <el-input
                    clearable
                    placeholder="请输入imo"
                    v-model="formData.watercraft_imo"
                  />
                </el-form-item>

                <el-form-item
                  label="船舶类型"
                  label-width="120"
                  prop="watercraft_type"
                >
                  <el-select
                    clearable
                    filterable
                    v-model="formData.watercraft_type"
                    placeholder="请选择船舶类型"
                  >
                    <el-option
                      v-for="item in bootType"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="船舶载货量"
                  label-width="120"
                  prop="watercraft_num"
                >
                  <el-input
                    placeholder="请选择船舶载货量"
                    v-model="formData.watercraft_num"
                  >
                    <template #append>
                      <el-select
                        v-model="formData.watercraft_dw"
                        placeholder="单位"
                        style="width: 70px"
                      >
                        <el-option label="吨" value="吨" />
                        <el-option label="箱标" value="箱标" />
                        <el-option label="立方" value="立方" />
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="船舶航区"
                  label-width="120"
                  prop="watercraft_area"
                >
                  <el-select
                    clearable
                    v-model="formData.watercraft_area"
                    placeholder="请选择船舶航区"
                  >
                    <el-option
                      v-for="item in bootLineType"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="造船时间"
                  label-width="120"
                  prop="watercraft_zcsj"
                >
                  <el-date-picker
                    v-model="formData.watercraft_zcsj"
                    type="year"
                    clearable
                    style="width: 100%"
                    placeholder="请选择造船时间"
                  />
                </el-form-item>
                <el-form-item class="flexPull" label=" " label-width="120">
                  <btn value="确认新增" @ok="saveFn"></btn>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
